<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>

<!DOCTYPE html>
<html>
	<head>
		<title>临时约课</title>
		<meta name="decorator" content="default"/>
		<script type="text/javascript">
			$(function() {
				//初始化表单验证
				$("#inputForm").initValidform();
			});
			
			function getCity(){
				var proviceid = $("#province option:selected").val();
	            $.post("${ctx}/sys/area/ajax?method=getchilds", { "parentid": proviceid },function (result) {
                    if (result != "") {
                        $("#city").html(result);
                        $('.rule-single-select').ruleSingleSelect();
                   	}
                }, "text");
			}
			
			function getArea(){
				var proviceid = $("#city option:selected").val();
	            $.post("${ctx}/sys/area/ajax?method=getarea", { "parentid": proviceid },function (result) {
                    if (result != "") {
                        $("#area").html(result);
                        $('.rule-single-select').ruleSingleSelect();
                   	}
                }, "text");
			}
			
			function commit(){
				$("#inputForm").submit();
				if(top){
					top.freeOrderDialog_a.close();
				}
			}
			
			function show(msg){
				var d = top.dialog({
					content:msg
				}).show();
				setTimeout(function () {
				    d.close().remove();
				}, 2000);
			}
			
			function exist(){
				var mobile = $("#mobile").val();
				 $.post("${ctx}/qd/course/freeorderform?mode=exist", { "mobile": mobile },function (result) {
								var result=JSON.parse(result);
	                    		var ok = result.ok;
	                    		if(ok == '0'){
	                    			$("#nikename").val(result.nikename);	
	                    			$("#id").val(result.contractId);
	                    			var province = $('<option selected="selected" value="'+result.provinceId+'">'+result.province+'</option>');
	                    			$("#province").html(province);
	                    			var city = $('<option selected="selected" value="'+result.cityId+'">'+result.city+'</option>');
	                    			$("#city").html(city);
	                    			var area = $('<option selected="selected" value="'+result.areaId+'">'+result.area+'</option>');
	                    			$("#area").html(area);
	                    			$("#province").attr("disabled","disabled");
	                    			$("#city").attr("disabled","disabled");
	                    			$("#area").attr("disabled","disabled");
	                    			$('.rule-single-select').ruleSingleSelect();
	                    			$("#nikename").attr("readonly","readonly");
	                    			$("#btnSubmit").show();
	                    			$("#count").html("此合同已免费体验"+result.count+"次")
	                    			$("#count").show();
	                    		}else if(ok == '1'){
	                    			show('该手机号已绑定中心');
	                    			$("#nikename").attr("readonly","readonly");
	                    			$("#btnSubmit").hide();
	                    		}else if(ok == '-1'){
	                    			$("#nikename").removeAttr("readonly");
	                    			$("#province").removeAttr("disabled");
	                    			$("#city").removeAttr("disabled");
	                    			$("#area").removeAttr("disabled");
	                    			$("#btnSubmit").show();
	                    		}
	                }, "text");
			}
		</script>
		
	</head>
	
	<body class="mainbody">
		<sys:message content="${message}"/>
		<form:form id="inputForm" modelAttribute="contract" action="${ctx}/qd/course/freeorderdispose?courseid=${courseId }" method="post" class="form-horizontal">
		<form:input id="id" type="hidden" path="id" />
			<!--内容-->
			<div id="floatHead" class="content-tab-wrap"  >
				<div class="content-tab">
					<div class="content-tab-ul-wrap">
						<ul>
							<li><a class="selected" href="javascript:;">免费预约</a></li>
						</ul>
					</div>
				</div>
			</div>
	
			<div class="tab-content" style="height: 430px;">
				<dl>
					<dt>会员手机号</dt>
					<dd>
						<form:input id="mobile" path="member.mobile" onblur="exist();" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="*请输入会员手机号" errormsg="*请输入会员手机号" sucmsg=" "/>
						<span class="Validform_checktip">*请输入会员手机号</span>
					</dd>
				</dl>
				<div style=" width:100%">
					<div style="float: left;width:33%;height: ">
						<dl>
							<dt>省份</dt>
							<dd>
								<div class="rule-single-select single-select">
									<form:select id="province" path="member.proviceId" onchange="getCity();" datatype="*" errormsg="请选择省份" sucmsg=" "  nullmsg="请选择省份" >
										<form:option value=""  selected="selected"  label="请选择..."/>
										<form:options items="${provinceList}" itemLabel="name" itemValue="id"/>
									</form:select>
								</div>
							</dd>
						</dl>
					</div>
					<div style="float: left;width:33%">
						<dl>
							<dt>城市</dt>
							<dd>
								<div class="rule-single-select single-select">
									<form:select id="city" path="member.cityId"  onchange="getArea();" datatype="*" errormsg="请选择城市" sucmsg=" "  nullmsg="请选择城市"  >
										<form:option value=""  selected="selected"  label="请选择..."/>
										<form:options items="${cityList}" itemLabel="name" itemValue="id"/>
									</form:select>
								</div>
							</dd>
						</dl>
					</div>
					<div style="float: left;width:33%">
						<dl>
							<dt>区域</dt>
							<dd>
								<div class="rule-single-select single-select">
									<form:select id="area"  path="member.areaId" datatype="*" errormsg="请选择区域" sucmsg=" "  nullmsg="请选择区域"  >
										<form:option value=""  selected="selected"  label="请选择..."/>
										<form:options tabindex="1" items="${areaList}" itemLabel="name" itemValue="id"/>
									</form:select>
								</div>
							</dd>
						</dl>
					</div>
				</div>
				<dl>
					<dt>会员昵称</dt>
					<dd>
						<form:input id = "nikename"  path="member.nikename" htmlEscape="false" maxlength="50" class="required" cssClass="input normal" datatype="*" nullmsg="*请输入会员昵称" errormsg="*请输入会员昵称" sucmsg=" "/>
						<span class="Validform_checktip">*请输入会员昵称</span>
					</dd>
				</dl>
			</div>
			<!--/内容-->
	
			<!--工具栏-->
			<div class="page-footer">
				<p id ="count" style = "color: red; display: none;"></p>
				<div class="btn-wrap" align="center">
					<input type="submit" name="btnSubmit" value="确认并录下一个" id="btnSubmit" class="btn yellow" /> 
				</div>
			</div>
			<!--/工具栏-->
		</form:form>
	</body>
</html>

